<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" th:href="@{/center/lib/layui-v2.5.5/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/css/public.css}" media="all">
		<script th:src="@{/center/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
		<script th:inline="none">
			layui.use(['form', 'table'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table;
		
		
				var tableIns = null;
		
				// 监听搜索操作
				//多条件查询，带分页
				form.on('submit(data-search-btn)', function(data) {
					console.log("前端参数:" + JSON.stringify(data.field));
					var jsonstr = JSON.stringify(data.field);
					tableIns = table.render({
						elem: '#currentTableId',
						url: '/center/showAuthByCondition',
						method: "post",
						contentType: 'application/json;charset=utf-8',
						where: {
							jsonstr: jsonstr
						},
						parseData: function(res) {
							return {
								"code": res.code,
								"msg": res.msg,
								"count": res.count,
								"data": res.data[0].list
							}
						},
						initSort: {
							field: 'centerAuthName',
							type: 'desc'
						},
						toolbar: '#toolbarDemo',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
									type: "checkbox",
									width: 50
								},
								{
									field: 'centerAuthName',
									width: 200,
									title: '权限名',
									sort: true
								},
								{
									field: 'centerAuthUrls',
									width: 200,
									title: '权限url',
									sort: true
								},
								{
									field: 'centerAuthid',
									width: 200,
									title: '权限ID',
									sort: true
								},
								{
									title: '操作',
									minWidth: 80,
									toolbar: '#currentTableBar',
									align: "center"
								}
							]
						],
						limit: 10,
						limits: [10, 15, 20, 25, 50, 100],
						page: true,
						skin: 'row'
					});
		
					return false;
				});
		
		
				/**
				 * toolbar监听事件
				 */
		
				table.on('toolbar(currentTableFilter)', function(obj) {
		
					if (obj.event === 'add') { // 监听添加操作
						var index = layer.open({
							title: '添加权限',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['100%', '100%'],
							content: '/center/page/table/add-auth.html',
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
					} else if (obj.event === 'delete') { // 监听删除操作
						//获取复选框选中的数据
						var checkStatus = table.checkStatus('currentTableId');
						var data = checkStatus.data;
		
						if (data.length > 0) {
							var arr = [];
							//只要centerLogid的字符串数组
							for (var i = 0; i < data.length; i++) {
		
								arr.push(data[i].centerAuthid);
							}
		
							var jsonstr = JSON.stringify(arr);
		
							layer.confirm('是否确定批量删除：' + arr.length + '条记录', function(index) {
								//发起批量删除请求
								$.ajax({
									url: '/center/batchDeleteAuth',
									contentType: 'application/json;charset=utf-8',
									type: 'POST',
									data: jsonstr,
									success: function(res) {
										tableIns.reload();
										layer.alert(res.msg + res.count + '条记录');
		
									}
								});
								layer.close(index);
		
							});
						} else {
							layer.alert('请勾选需要删除的记录');
						}
		
		
					}
				});
		
		
		
				//监听表格复选框选择
				table.on('checkbox(currentTableFilter)', function(obj) {
					console.log(obj.data.centerAuthid);
		
				});
		
		
				//编辑权限
				table.on('tool(currentTableFilter)', function(obj) {
					var data = obj.data;
					var jsonstr = data.centerAuthid
					if (obj.event === 'edit') {
		
						var index = layer.open({
							title: '编辑权限',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['100%', '100%'],
							content: '/center/page/table/edit-auth.html',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
								console.log(body.html()) //得到iframe页的body内容
								body.find('#centerAuthName').val(data.centerAuthName);
								body.find('#centerAuthid').val(data.centerAuthid);
								body.find('#centerAuthUrls').val(data.centerAuthUrls);
							}
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
						return false;
					} else if (obj.event === 'delete') { //监听单条删除操作
						layer.confirm('是否确定删除ID为：' + jsonstr + '的权限', function(index) {
							$.ajax({
								url: '/center/deleteAuth',
								contentType: 'application/json;charset=utf-8',
								method: 'POST',
								data: jsonstr,
								success: function(res) {
									tableIns.reload();
									layer.alert(res.msg + res.count + '条记录');
		
								}
							});
		
							layer.close(index);
						});
					}
				});
		
		
			});
		</script>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<fieldset class="table-search-fieldset">
					<legend>查询已有权限</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">权限名</label>
									<div class="layui-input-inline">
										<input type="text" name="centerAuthName" id="centerAuthName" autocomplete="off" class="layui-input">
									</div>
								</div>

								<div class="layui-inline">
									<label class="layui-form-label">权限url</label>
									<div class="layui-input-inline">
										<input type="text" name="centerAuthUrls" id="centerAuthUrls" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">权限ID</label>
									<div class="layui-input-inline">
										<input type="text" name="centerAuthid" id="centerAuthid" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
										查询
									</button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>

				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
					  <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除
                </button>
            </div>
        </script>

				<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

				<script type="text/html" id="currentTableBar">
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

			</div>
		</div>
	</body>
</html>
